<template>
  <div class="breadcumb">
    <ul>
      <li>
        <span v-if="item.length>0"><a @click="_ChangeSelected('ROOT')">选择项</a><span class="span4">/</span></span>
        <span v-else>选择项</span>
      </li>
      <li v-for="(v,i) in item" :key="i">
        <a @click="_ChangeSelected(v.deptcode)">{{ v.content }}</a>
        <span v-if="i<item.length-1" class="span4">/</span>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  name: 'Breadcumb',
  props: {
    item: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      // lists: []
    }
  },
  mounted() {
    console.log('item.length=' + this.item.length)
  },
  // 监听路由变化
  /* watch: {
    $route(to, from) {
      let matched = to.matched // this.$route.matched
      // 这个地方是为了固定第一级目录是首页不变
      if (matched.length && matched[0].name !== 'home') {
        matched = [{ path: '/home', name: 'home', meta: { title: '首页' }}, ...matched]
      }
      // 数组名 是一种追加数组的方法
      // var arr = [1, 2, 3]
      // var arr1 = [4, 5]
      // var arr2 = [2, ...arr1] === [2, 4, 5]
      //
      this.lists = matched
    }
  },*/
  methods: {
    _ChangeSelected(deptcode) {
      this.$emit('changeSelected', deptcode)
    }
  }
}
</script>

<style scoped>
li {
  height: 25px;
  min-height: 25px;
  vertical-align: middle;
  list-style: none;
  display: inline;
}
li a {
  color: #2789ee;
}
.breadcumb {
  padding: 15px 0px 10px 0px;
  margin-bottom: 4px;
  font-size: 12px;
}
.span4 {
  min-width: 10px;
  display: inline-block;
  text-align: center;
}
</style>
